<template>
  <div class="electronicCOM">
    <div v-if="state != 2">
      <div v-for="(item, index) in list" :key="index" class="mb24">
        <a-collapse default-active-key="1" :bordered="false" v-if="!item.edit" v-model="item.collapse" @change="(e) => change(e, index)">
          <template #expandIcon="props">
            <a-icon
              type="caret-right"
              :style="
                (typeList[item.type] || item.startTime || item.endTime || item.termYear || item.termMonth) && !item.collapses
                  ? 'margin-top: -18px'
                  : ''
              "
              :rotate="props.isActive ? 90 : 0"
            />
          </template>
          <a-collapse-panel key="1">
            <template slot="header">
              <div
                class="h-t"
                :style="
                  (typeList[item.type] || item.startTime || item.endTime || item.termYear || item.termMonth) && !item.collapses
                    ? 'margin-bottom: 12px'
                    : ''
                "
              >
                {{ item.name ? item.name : "未命名合同" }}
              </div>
              <div class="h-d" v-show="!item.collapses">
                <span v-if="typeList[item.type]">{{ typeList[item.type] }}</span>
                <span v-if="typeList[item.type] && (item.startTime || item.endTime)" class="line"></span>
                <span v-if="item.startTime">{{ moment(item.startTime).format("YYYY-MM-DD") }} </span>
                <span v-if="item.startTime && item.endTime"> ~ </span>
                <span v-if="item.endTime"> {{ moment(item.endTime).format("YYYY-MM-DD") }}</span>
                <span v-if="(item.termYear || item.termMonth) && (item.startTime || item.endTime || item[item.type])" class="line"></span>
                <span v-if="item.termYear">{{ item.termYear }} 年</span>
                <span v-if="item.termMonth">{{ item.termMonth }} 月</span>
              </div>
            </template>
            <div class="collapse-box">
              <a-dropdown overlayClassName="action-popover" :style="item.contractId && item.closable ? 'top:66px' : ''">
                <a-menu slot="overlay" @click="(e) => handleMenuchange(e, index, item)">
                  <a-menu-item key="1">
                    <div class="m-div">编辑</div>
                  </a-menu-item>
                  <a-menu-item key="2">
                    <div class="m-div">删除</div>
                  </a-menu-item>
                </a-menu>
                <a-button class="btn">
                  操作
                  <a-icon type="caret-down" />
                </a-button>
              </a-dropdown>
              <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
                <a-alert
                  class="mb24"
                  v-if="item.contractId && item.closable"
                  message="当前合同已发起签署，仅可修改合同名称和备注，修改后会自动同步到签署记录"
                  closable
                  type="warning"
                  show-icon
                  @close="item.closable = false"
                />
                <a-row type="flex">
                  <a-col :span="11">
                    <a-form-item label="合同类型">
                      {{ typeList[item.type] }}
                    </a-form-item>
                  </a-col>
                  <a-col :span="11" v-if="item.type != 'laborContractUnlimit'">
                    <a-form-item label="合同期限">
                      <span v-if="item.termYear"> {{ item.termYear }} 年 </span>
                      <span v-if="item.termMonth"> {{ item.termMonth }} 月 </span>
                    </a-form-item>
                  </a-col>
                  <a-col :span="11">
                    <a-form-item label="合同开始时间">
                      <span v-if="item.startTime">{{ moment(item.startTime).format("YYYY-MM-DD") }}</span>
                    </a-form-item>
                  </a-col>
                  <a-col :span="11" v-if="item.type != 'laborContractUnlimit'">
                    <a-form-item label="合同结束时间">
                      <span v-if="item.endTime"> {{ moment(item.endTime).format("YYYY-MM-DD") }}</span>
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-form-item label="合同备注" :label-col="{ span: 3 }" :wrapper-col="{ span: 20 }" style="margin-left: -1.2%">
                    {{ item.remark }}
                  </a-form-item>
                </a-row>
                <a-row>
                  <a-form-item label="合同附件" :label-col="{ span: 3 }" :wrapper-col="{ span: 20 }" style="margin-left: -1.2%">
                    <div class="file-box">
                      <div class="file mr12 mb12" v-if="item.contractId">
                        <div class="f-img">
                          <img src="../../../../../../../components/Uploading/img/pdf.png" alt="" />
                          <div class="model" @click="check(item.contractId)">
                            <div>
                              <a-icon type="eye" />
                              <p>预览</p>
                            </div>
                          </div>
                        </div>
                        <div class="f-name">合同附件.pdf</div>
                      </div>
                    </div>
                  </a-form-item>
                </a-row>
              </a-form>
            </div>
          </a-collapse-panel>
        </a-collapse>

        <forms v-else @upDate="upDate" :index="index" :employInfoId="employInfoId" :defaultVal="item" />
      </div>
    </div>
    <forms v-else @upDate="upDate" :index="-1" :employInfoId="employInfoId" :defaultVal="{}" />
    <a-modal v-model="deleteVisible" title="删除确认" :confirm-loading="confirmLoading" @ok="handleEnable" :width="400">
      <div style="display: flex; justify-content: center; align-items: center">
        <a-icon type="question-circle" style="font-size: 40px; color: red" />
        <div style="margin-left: 15px">是否确认删除？</div>
      </div>
    </a-modal>
    <a-modal title="预览" :visible="detailVisible" width="800px" @cancel="detailVisible = false" :footer="null">
      <div class="flex-start-center">
        <iframe
          v-if="eleContractDetailShow"
          :src="`${path}?token=${$store.state.auth.token}`"
          class="checkbox"
          style="width: 756px; height: 70vh; overflow: auto"
        />
      </div>
    </a-modal>
  </div>
</template>

<script>
import moment from "moment";
import forms from "./forms";
import { delEmpContracts } from "@/api/staff/staff";
import { checkEleContract } from "@/api/company/contract";
const typeList = {
  laborContractLimit: "固定期限劳动合同",
  laborContractUnlimit: "无固定期限劳动合同",
  laborContractJobs: "以完成一定工作任务为期限的劳动合同",
  internAccords: "实习协议",
  laborContract: "劳务合同",
  reemployAccords: "返聘协议",
  laborContractDispatch: "劳务派遣合同",
  borrowedContract: "借调合同",
  engagementLetter: "约定书",
  partTime: "兼职合同",
  noviciateAgreement: "见习协议",
  dimissionContract: "离职合同",
  retireReEmploy: "退休返聘合同",
  other: "其它"
};
export default {
  components: {
    forms
  },
  props: {
    list: {
      type: Array,
      default: () => []
    },
    state: {
      type: Number,
      default: 0
    },
    employInfoId: {
      type: String,
      default: ""
    }
  },
  watch: {
    list(v) {
      if (v) this.dataList = v;
    }
  },
  data() {
    return {
      typeList,
      deleteVisible: false,
      confirmLoading: false,
      detailVisible: false,
      eleContractDetailShow: false,
      path: "",
      dataList: [],
      id: ""
    };
  },
  methods: {
    moment,
    handleMenuchange(v, i, item) {
      if (v.key === "1") {
        this.$set(this.dataList, i, {
          ...this.dataList[i],
          edit: true
        });
      }
      if (v.key === "2") {
        this.id = item.id;
        this.deleteVisible = true;
      }
    },
    upDate(i, v) {
      if (i !== -1) {
        this.$set(this.dataList, i, {
          ...this.dataList[i],
          edit: false
        });
      } else {
        this.$emit("upState");
      }
      if (v) this.$emit("upDate");
    },
    async handleEnable() {
      this.confirmLoading = true;
      try {
        const id = this.id;
        await delEmpContracts([id]);
        this.$notification.success({ message: "操作成功" });
        this.deleteVisible = false;
        this.confirmLoading = false;
        this.$emit("upDate");
      } catch (err) {
        console.log("error log --> ", err);
        this.confirmLoading = false;
      }
    },
    change(e, i) {
      if (e.length > 0) {
        this.$set(this.dataList, i, {
          ...this.dataList[i],
          collapses: true
        });
      } else {
        this.$set(this.dataList, i, {
          ...this.dataList[i],
          collapses: false
        });
      }
    },
    check(record) {
      this.detailVisible = true;
      this.eleContractDetailShow = false;
      this.checkEleContract(record);
    },
    checkEleContract(id) {
      checkEleContract({ contractId: id }).then((res) => {
        this.path = res.data[0].path;
        this.$nextTick(() => {
          this.eleContractDetailShow = true;
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.electronicCOM {
  .h-t {
    font-size: 16px;
    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
    font-weight: 500;
    color: #3c3d43;
  }
  .h-d {
    font-size: 14px;
    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
    font-weight: 400;
    color: #767885;
  }
  ::v-deep .ant-collapse-item {
    border-radius: 4px !important;
    border: 1px solid #e8e8e8;
    background: #fafafa;
    .ant-collapse-content-box {
      padding-left: 41px;
    }
  }
  ::v-deep .ant-form-item-label label {
    font-size: 14px;
    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
    font-weight: 400;
    color: #767885;
  }
  .collapse-box {
    position: relative;
    .btn {
      position: absolute;
      top: 0;
      right: 0;
    }
  }
  .line {
    display: inline-block;
    width: 1px;
    height: 12px;
    background: #d7d7d7;
    vertical-align: middle;
    margin: -2px 10px 0 10px;
  }
  .file-box {
    display: flex;
    flex-wrap: wrap;
  }
  .file {
    width: 240px;
    height: 178px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #e8e8e8;
    padding: 10px;
    .f-img {
      width: 220px;
      height: 132px;
      display: flex;
      align-items: center;
      border: 1px dashed #d7d7d7;
      position: relative;
      &:hover .model {
        display: block;
      }
      .model {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
        div {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          width: 100%;
          height: 100%;
          background: rgba($color: #000000, $alpha: 0.6);
          color: #fff;
          i {
            font-size: 18px;
          }
          p {
            height: 28px;
            line-height: 28px;
          }
        }
      }
      img {
        width: 64px;
        height: 74px;
        margin: 0 auto;
      }
    }

    .f-name {
      width: 100%;
      font-size: 14px;
      font-family: SourceHanSansCN-Regular, SourceHanSansCN;
      font-weight: 400;
      color: #55565d;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
.action-popover .m-div {
  text-align: center;
  font-size: 12px;
  font-family: SourceHanSansCN-Regular, SourceHanSansCN;
  font-weight: 400;
  color: #55565d;
  &:hover {
    color: var(--primary) !important;
  }
}
</style>
